<!-- 
vscode是一个集成开发环境
   => web前端开发为主
   =>集成开发环境是什么?
     记笔本软件 + 运行代码
     
    => 其它集成开发环境: hbuilder

生成网页结构
   快捷键: shift + ! 

html标签元素
   => 语法:  <开始标签>内容</结束标签>
             <标签/>  单标签
             <br/>  换行
             <hr/> 水平分割线
              <h1>标题</h1>
   =>常用html标签元素
        h1-h6 标题
        p    段落
        <br/> 换行
        <hr/>  分割线

        img  图像  <img src="图像资源路径"/>
            => ./ 当前目录
            => ../ 当前文件的上级目标

        a    超链接  <a href="http://www.baidu.com">百度</a>

        列表标签
           无序列表
              ul  li
           有序列表
           自定义列表
        
        表格标签
           table
             tr  
                th
                td
        表单标签
           => 网页交互 
           form 表单标签
              文本输入框  
              <input type="text">
                 
        div  块标签
           特点: 独占一行，后面元素换行显示
        span 行内标签
           内容多宽，标签元素就多宽，两个行内标签挨着排

-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>helloworld</title>
</head>

<body>
    <h1>一级标签</h1>
    <h2>二级标签</h2>
    <p>段落</p>

    <img src="../img/11.jpg" alt="熊猫" />
    <a href="http://www.baidu.com">百度</a>

    <ul>
        <li>新闻1</li>
        <li>新闻2</li>
        <li>新闻3</li>
    </ul>

    <ol>
        <li>张三丰</li>
        <li>张无忌</li>
        <li>张卫健</li>
    </ol>

    <table border="1">
        <tr>
            <th>单元1</th>
            <th>单元2</th>
        </tr>
        <tr>
            <td>单元11</td>
            <td>单元12</td>
        </tr>
    </table>

    <!-- 表单 -->
    <form>
        <!-- 文本输入框 -->
        <input type="text" placeholder="请输入内容" value="周sir" name="username" />
        <!--  密码输入框-->
        <input type="password" placeholder="请输入密码" value="123" name="password">
        <!-- 单选框 -->
        <input type="radio" name="sex" value="man">男
        <input type="radio" name="sex" value="woman">女
        <br />
        <!-- 复选框 -->
        兴趣：<input type="checkbox" name="xinque" value="playGame" />玩游戏
        <input type="checkbox" name="xinque" value="swiming" />游泳
        <br />
        <!-- 多行文本框 -->
        <textarea>
            </textarea>
        <br />
        <!-- 下拉选择框 -->
        <select name="time">
            <option value="12">2024/9/12</option>
            <option value="13">2024/9/13</option>
            <option value="14">2024/9/14</option>
        </select>

        <br />
        <!-- 提交按钮 -->
        <input type="submit" value="登录" />
        <!-- 按钮 -->
        <button>登录</button>
    </form>

    <div>区块1 </div>

    <span>行内标签1</span>
    <span>行内标签2</span>
</body>

</html>